<template>
  <div>
   <h1 ref="head">生命周期</h1>
  </div>
</template>
<script setup>
// 生命周期:组件从创建到销毁的特定一些过程,过程执行的回调函数,称为生命周期钩子函数
// ref:创建一个响应式数据
// onMounted:组件挂载完毕的回调函数*
// onBeforeMount:组件挂载之前的回调函数
// onUpdated:组件更新完毕的回调函数
// onBeforeUpdate:组件更新之前的回调函数
// onUnmounted:组件卸载完毕的回调函数
// onBeforeUnmount:组件卸载之前的回调函数*
// 挂载完毕:dom操作,ajax请求,定时器,注册事件
// 卸载之前:清除定时器,清除事件监听
import { ref,onMounted,onBeforeMount,onUpdated,onBeforeUpdate,onUnmounted,onBeforeUnmount} from 'vue'; 
// 创建一个响应式数据
const head = ref(null);
// 01 setup本身就是created,beforeCreate
console.log("组件已经创建完毕")
onMounted(()=>{
  // 03 组件挂载完毕
  console.log("组件挂载完毕")
  console.log(head.value.innerHTML);
})
</script>